<template>
  <div class="main-content pd16">

    <!--搜索栏-->
    <el-form class="search-form" ref="searchFormRef" :model="searchForm" :inline="true" label-width="70px">

      <el-form-item label="会议ID" prop="id" label-width="80px">
        <el-input v-model="searchForm.id" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="会议号" prop="mtCode" label-width="80px">
        <el-input v-model="searchForm.mtCode" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>

      <el-form-item label="会议状态" prop="meetingStatus" label-width="80px">
        <el-select v-model="searchForm.meetingStatus" placeholder="请选择" clearable style="width: 100px">
          <el-option v-for="dict in enu_room_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
        <el-button icon="Refresh" @click="resetSearch">重置</el-button>
      </el-form-item>

    </el-form>

    <!--按钮组-->
    <!--    <div class="fx mgb12">-->
    <!--      <el-button type="danger" plain size="small" icon="Delete" @click="deleteBatch">批量删除</el-button>-->
    <!--    </div>-->

    <!--表格-->
    <el-table border highlight-current-row row-key="id" v-loading="option.loading" :data="option.tableData"
              @selection-change="selectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="会议ID" prop="id" :show-overflow-tooltip="true" width="100"></el-table-column>
      <el-table-column label="会议号" prop="mtCode" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="主持人ID" prop="userId" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="主持人账号" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="主持人姓名" prop="idCardName" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="主持人手机号" prop="phoneMobile" :show-overflow-tooltip="true"
                       width="170"></el-table-column>
      <el-table-column label="会议状态" align="center" prop="meetingStatus" :show-overflow-tooltip="true" width="100">
        <template #default="scope">
          <dict-tag :options="enu_room_status" :value="scope.row.meetingStatus"></dict-tag>
        </template>
      </el-table-column>

      <el-table-column label="会议开启时间" prop="openTime" width="170"></el-table-column>
      <el-table-column label="会议结束时间" prop="closeTime" width="170"></el-table-column>
      <el-table-column label="当前房间人数" prop="onlineCount" width="170">
        <template #default="scope">
          <span>{{ scope.row.onlineCount || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="累计参会人数" prop="totalOnlineCount" width="170"></el-table-column>

      <el-table-column label="会议内最大人数" prop="userMaxCount" width="170"></el-table-column>
      <el-table-column label="当前人数" prop="nowUserCount" width="170"></el-table-column>
      <el-table-column label="当前赞数" prop="nowZanCount" width="170"></el-table-column>
      <el-table-column label="当前热度" prop="nowHotCount" width="170"></el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="openEdit(scope.row)">
            会议设置
          </el-button>
          <el-button link type="warning" icon="Menu" @click="closeMeetingRoom(scope.row)">
            立即关闭会议
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="fx_end">
      <el-pagination
          class="mgt8"
          small
          background
          :total="option.totalRow"
          :page-sizes="option.pageSizes"
          v-model:current-page="searchForm.pageNumber"
          v-model:page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="searchData"
          @current-change="searchData"
      />
    </div>

    <!--Dialog-->
    <el-dialog :title="option.dialogTitle" v-model="option.openDialog" width="680px" :close-on-click-modal="false"
               draggable append-to-body destroy-on-close>

      <el-form ref="formDataRef" size="default" :model="formData" :rules="formRules" label-width="200px">

        <el-form-item label="会议密码" prop="inPassword">
          <el-input v-model="formData.inPassword" placeholder="请输入" style="width: 300px"/>
        </el-form-item>

        <el-form-item label="会议类型" prop="inType">
          <el-select v-model="formData.inType" placeholder="请选择" clearable style="width: 300px">
            <el-option v-for="dict in enu_room_in_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="主持人不在时允许加入" prop="isBeforeIn">
          <el-select v-model="formData.isBeforeIn" placeholder="请选择" clearable style="width: 300px">
            <el-option v-for="dict in enu_room_is_before_in" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="入会后自动静音" prop="isInMute">
          <el-select v-model="formData.isInMute" placeholder="请选择" clearable style="width: 300px">
            <el-option v-for="dict in enu_room_is_in_mute" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>


        <el-form-item label="会议结束时间" prop="closeSettingTime">
          <el-date-picker
              style="width: 300px"
              v-model="formData.closeSettingTime"
              type="datetime"
              placeholder="选择日期时间"
          ></el-date-picker>

        </el-form-item>

      </el-form>

      <template #footer>
        <el-button @click="()=>{option.openDialog=false}">取 消</el-button>
        <el-button v-if="option.dialogType==='edit'" type="primary" @click="submitEdit">保 存</el-button>
      </template>

    </el-dialog>


  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {closeMeeting, roomPage, updateMtRoom} from "@/common/api/mt";
import $modal from "@/common/utils/modal";
import {copyNew} from "@/common/utils/kit";
import DictTag from "@/common/component/DictTag.vue";
import {asDict} from "@/common/api/common";
import {formatDateTime} from "@/common/utils/filter";

const {proxy} = getCurrentInstance();
const {
  enu_room_status,
  enu_room_is_before_in,
  enu_room_in_type,
  enu_room_is_in_mute
} = asDict("enu_room_status", "enu_room_is_before_in", "enu_room_in_type", "enu_room_is_in_mute");

let optionKey = {
  loading: false,
  dialogType: "",
  dialogTitle: "",
  openDialog: false,
  tableData: [],
  selectIds: [],
  selectNames: [],
  pageSizes: [1, 10, 20, 50, 100],
  totalRow: 0,
  nowRoleId: 0,
  defaultChecked: [],
  allRole: [],
}

let searchKey = {
  pageNumber: 1,
  pageSize: 10,
  id: '',
  mtCode: '',
  meetingStatus: '',
}
let formKey = {
  id: "",
  inPassword: "",//入会密码
  isBeforeIn: "",//是否允许主持人不在时进入会议
  inType: "",//入会类型
  isInMute: "",//入会后是否自动静音
  closeSettingTime: "",//会议结束时间
}
const formRules = ref({
  isBeforeIn: [{required: true, message: "不能为空", trigger: "blur"}],
  inType: [{required: true, message: "不能为空", trigger: "blur"}],
  isInMute: [{required: true, message: "不能为空", trigger: "blur"}],
  closeSettingTime: [{required: true, message: "不能为空", trigger: "blur"}],
});

const searchForm = ref(searchKey)
const formData = ref(formKey);
const option = ref(optionKey);

function resetForm() {
  formData.value = copyNew(formKey);
}

function resetSearch() {
  proxy.$refs["searchFormRef"].resetFields();
  searchData()
}

//页面加载完成回调
onMounted(() => {

  searchData()

})

function selectionChange(rows) {
  option.value.selectIds = rows.map(item => item.id);
  option.value.selectNames = rows.map(item => item.account);
}

//搜索数据
function searchData() {
  option.value.loading = true;
  roomPage(searchForm.value).then(res => {
    let {totalRow, records, pageNumber, pageSize} = res.data;
    option.value.loading = false;
    option.value.totalRow = totalRow * 1
    option.value.tableData = records
    searchForm.value.pageNumber = pageNumber
    searchForm.value.pageSize = pageSize
  })
}


function openEdit(row) {
  //console.log(row)
  option.value.dialogTitle = "会议设置";
  option.value.openDialog = true;
  option.value.dialogType = "edit";
  formData.value = copyNew(row);
}


function submitEdit() {
  proxy.$refs["formDataRef"].validate(valid => {

    if (valid) {
      formData.value.closeSettingTime = formatDateTime(formData.value.closeSettingTime)
      // formData.value.closeSettingTime = new Date(formData.value.closeSettingTime).getTime();
      //closeSettingTime 转成时间戳
      updateMtRoom(formData.value).then(res => {
        if (res.success) {
          //console.log(res)
          $modal.success();
          option.value.openDialog = false;
          searchData()
        }
      })
    }

  });
}

function closeMeetingRoom(row) {
  $modal.confirmWarning(`确认关闭当前会议：[会议号：${row.mtCode}]吗？`, "关闭会议")
      .then(() => {
        let param = {
          id: row.id,
          userId: row.userId,
        }
        //console.log(paramStr)
        closeMeeting(param).then(res => {
          if (res.success) {
            $modal.success();
            searchData()
          }
        })
      })
      .catch(() => {
      })
}


</script>

<style scoped lang="less">

</style>